<%@page contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="currentUser" value="${(!empty currentUser && currentUser) }" />
<t:template>
	<jsp:attribute name="include">
	<c:choose>
		<c:when test="${currentUser }">
		<script type="text/javascript">
			function showModal() {
				initUserEditForm("${user.id}", "${user.firstname}", "${user.lastname}", "${user.address}", "Profilom szerkesztése");
				$("#editUserModal").modal('show');
			}
		</script>
		</c:when>
		<c:otherwise>
		<script
					src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=hu"></script>
		<script type="text/javascript">
			function initialize() {
				geocoder = new google.maps.Geocoder();
				geocoder.geocode({
					'address' : "${user.city}",
					region : "hu"
				}, function(results, status) {
					if (status == google.maps.GeocoderStatus.OK && results[0]) {
						new google.maps.Map(document.getElementById("googleMap"), {
							center : results[0].geometry.location,
							zoom : 13,
							mapTypeId : google.maps.MapTypeId.ROADMAP
						});
					}
				});
				if ("${currentUserCity}" != "${user.city}") {
					$
							.get(
									"http://maps.googleapis.com/maps/api/directions/json?origin=${currentUserCity}&destination=${user.city}&sensor=false&region=hu&units=metric&language=hu")
							.success(function(data) {
								var duration = data.routes[0].legs[0].duration.text;
								var distance = data.routes[0].legs[0].distance.text;
								$("#userCity").attr('data-original-title', duration + '<br/>' + distance);
								var tooltipformat = tooltipOptionsHtmlFormat;
								tooltipformat.title = duration + '<br/>' + distance;
								$("#city").tooltip(tooltipOptionsHtmlFormat);
							});
				}

			}

			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
		</c:otherwise>
		</c:choose>
	</jsp:attribute>
	<jsp:attribute name="pagetitle">
		<c:choose>
			<c:when test="${currentUser }">
				<div style="width: 95%;">
				Profilom
				<input type="button" class="btn btn-info pull-right" id="edit"
						onclick="showModal(); return false;" value="Szerkesztés" />
							</div>
			</c:when>
			<c:otherwise>
      			<c:out value="${user.username }" /> profilja
			</c:otherwise>
		</c:choose>
    </jsp:attribute>
	<jsp:body>
		<div style="float: left; max-width: 150px;">
		<form:form class="form-horizontal">
			<div class="control-group">
			    <label class="control-label" for="usernameText">Felhasználói név:</label>
			    <div class="controls">
			      <div id="usernameText" class="formTextCenter">
			      	<c:out value="${user.username }" />
			      </div>
			    </div>
			</div>
			
			<div class="control-group">
			    <label class="control-label" for="name">Név:</label>
			    <div class="controls">
			      <div id="name" class="formTextCenter">
			      	<c:out value="${user.lastname } ${user.firstname }" />
			      </div>
			    </div>
			</div>
			
			<div class="control-group">
			    <label class="control-label" for="lastlogin">Utolsó bejelentkezés:</label>
			    <div class="controls">
			      <div id="lastlogin" class="formTextCenter">
			      	<fmt:formatDate value="${user.lastlogin }"
								pattern="yyyy.MM.dd. HH:mm" type="BOTH" />
			      </div>
			    </div>
			</div>
			
			<div class="control-group">
			    <label class="control-label" for="city">Város:</label>
			    <div class="controls">
			      <div id="city" class="formTextCenter">
			      	<c:out value="${user.city }" />
			      </div>
			    </div>
			</div>
			
			<c:if test="${currentUser }">
				<div class="control-group">
			    <label class="control-label" for="address">Lakhely:</label>
			    <div class="controls">
			      <div id="address" class="formTextCenter">
			      	<c:out value="${user.address }" />
			      </div>
			    </div>
			</div>
			</c:if>
		</form:form>
		</div>
		<c:if test="${!currentUser }">
			<div id="googleMap"
				style="float: right; width: 500px; height: 380px;"
				class="img-polaroid"></div>
		</c:if>
		<c:if test="${currentUser }">
			<jsp:include page="_userEditModal.jsp">
				<jsp:param value="${user.city }" name="selectedCity" />
				<jsp:param value="false" name="adminEdit" />
			</jsp:include>
		</c:if>
    </jsp:body>
</t:template>